<template>
  <div>
    <a-divider type="vertical" />
    <a-button @click="deleteRecord"> 删除 </a-button>

    开票客户模糊搜索
    <a-input v-model="filter_buyer_name_value"> </a-input>
    <a-button @click="handleFilter"> 客户名搜索 </a-button>

    <div>
      <!-- <a-button @click="handelBtn('action_confirm_all')"> 确认 </a-button> -->
      <a-button :disabled="false" @click="handelBtn('action_draw_request')">
        开票
      </a-button>
      <a-button :disabled="false" @click="handelBtn('action_draw_query')">
        开票查询
      </a-button>
      <a-button
        :disabled="undefined"
        @click="handelBtn('action_draw_send_result')"
      >
        回写结果
      </a-button>
    </div>

    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="records"
      rowKey="id"
      :customRow="tableCustomRow"
    >
    </a-table>

    <a-modal
      title="发票"
      :width="1200"
      :visible="showFormView"
      @ok="showFormView = false"
      @cancel="showFormView = false"
    >
      <FormView ref="refFormView" />
    </a-modal>
  </div>
</template>

<script>
function sleep(millisecond) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve()
    }, millisecond)
  })
}

// import api from '@/odoorpc'
import simpleTreeMixin from '../../fp_sale/simpleTreeMixin'

import FormView from './fp_out_form.vue'

export default {
  name: 'FpTreeView',
  components: { FormView },
  mixins: [simpleTreeMixin],
  props: {},

  data() {
    return {
      debug: 6,

      filter_buyer_name_value: '',

      currentId: null,

      showFormView: false
    }
  },

  computed: {
    columns() {
      return [
        // {
        //   dataIndex: 'id',
        //   key: 'id',
        //   title: 'ID',
        //   ellipsis: true
        // },
        {
          dataIndex: 'name',
          key: 'name',
          title: '单号',
          ellipsis: true
        },

        // {
        //   dataIndex: 'type',
        //   key: 'type',
        //   title: '进销项类型',
        //   ellipsis: true
        // },

        // {
        //   dataIndex: 'invoice_type',
        //   key: 'invoice_type',
        //   title: '发票类型',
        //   customRender: value => {
        //     const meta = this.fields['invoice_type']
        //     const elm = meta.selection.find(item => item[0] === value)
        //     return elm ? elm[1] : ''
        //   },
        //   ellipsis: true
        // },

        {
          dataIndex: 'state',
          key: 'state',
          title: '状态',
          customRender: value => {
            const meta = this.fields['state']
            const elm = meta.selection.find(item => item[0] === value)
            return elm ? elm[1] : ''
          },
          ellipsis: true
        },

        // {
        //   dataIndex: 'company_id',
        //   key: 'company_id',
        //   title: '公司',
        //   customRender: value => (value ? value[1] : ''),
        //   ellipsis: true
        // },

        {
          dataIndex: 'buyer_name',
          key: 'buyer_name',
          title: '购买方',
          ellipsis: true
        },

        {
          dataIndex: 'saler_name',
          key: 'saler_name',
          title: '销售方',
          ellipsis: true
        },

        {
          dataIndex: 'type_code',
          key: 'type_code',
          title: '发票代码',
          ellipsis: true
        },

        {
          dataIndex: 'code',
          key: 'code',
          title: '发票号码',
          ellipsis: true
        },
        {
          dataIndex: 'date_order',
          key: 'date_order',
          title: '日期',
          ellipsis: true
        },

        {
          dataIndex: 'amount_total',
          key: 'amount_total',
          title: '金额',
          ellipsis: true
        }
      ]
    }
  },

  watch: {},

  async created() {},

  mounted() {},

  methods: {
    async handleFilter() {
      const val = this.filter_buyer_name_value
      this.search_values = this.treeview.search_change(
        this.search_items.buyer_name,
        [
          val
          // { string: val_p, value: val_p }
        ]
      )

      this.records = await this.treeview.search_read()
    },

    async _call_read_loop(records) {
      this.debug = this.debug - 1
      if (this.debug < 0) {
        return
      }

      const records_done = records.filter(item => item.state === 'done')

      if (records_done.length) {
        const ids = records_done.map(item => item.id)
        await this.treeview.Model.call_button('action_draw_send_result', ids)
      }

      const records_doing = records.filter(item => item.state === 'doing')

      if (records_doing.length) {
        const ids = records_doing.map(item => item.id)
        await this.treeview.Model.call_button('action_draw_query', ids)
        await this.search_data(this.activeIds)
        const records2 = this.records.filter(item => ids.includes(item.id))
        await sleep(600)
        await this._call_read_loop(records2)
      }
    },

    async handelBtn(name) {
      if (name === 'action_draw_request') {
        await this.treeview.Model.call_button('action_confirm', this.activeIds)
      }
      // const res =
      await this.treeview.Model.call_button(name, this.activeIds)
      await this.search_data(this.activeIds)
      if (name === 'action_draw_request') {
        await sleep(100)
        this._call_read_loop(this.records)
      }
    },
    async handleOnRowClick(record) {
      this.showFormView = true

      await sleep(100)

      this.$refs.refFormView.init(this.actionId, record.id)
    },

    tableCustomRow(record) {
      const that = this
      return {
        // props: {
        //   xxx... //属性
        // },
        on: {
          // 事件
          // eslint-disable-next-line no-unused-vars
          click: event => {
            console.log(record, event)

            that.handleOnRowClick(record)
          } // 点击行
        }
      }
    },

    async deleteRecord() {
      console.log(this.activeIds)

      await this.treeview.unlink(this.activeIds)
      this.records = await this.treeview.search_read()
      this.activeIds = []
    }
  }
}
</script>

<style type="text/css"></style>
